<template>
    <div class="my-side">
        <ul>
            <li v-for="(item,index) in menuList" :key="index" @click="show=!show">
                {{item.title}}
                <!-- 想给谁加动画，就让transition包裹谁 -->
                <transition name="my">
                    <ol v-if="show">
                        <!-- v-for  和v-show一起使用可以做筛选，不用考虑优先级的问题 -->
                        <!-- vue3中 -->
                        <!-- v-for 和v-if一起使用要考虑优先级的问题  在在外出包裹一层template标签，在标签上写v-for -->
                        <template v-for="(ele,i) in item.children">
                             <li v-if="ele.type.includes($store.state.status)" :key="i">{{ele.title}}</li>
                        </template>
                      
                   </ol>
                </transition>
                
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
import {reactive,ref,toRefs} from 'vue'
export default {
    setup(props) {
        const data = reactive({
            menuList:[],
            show:true,//动画的状态
            
        })
        // 请求
        axios.get('menu.json').then(res=>{
            console.log(res);
            data.menuList = res.data
            })
       
        return {...toRefs(data)}
        
    }
}
</script>
<style lang="scss" scoped>
.my-side{
    background:#333;
    color:#fff;
}
ul{
    li{
        font-size:18px;
        padding:0 10px;
        ol{
            height:120px;//一定要给ol设置高
            width:150px;
            overflow:hidden;
            li{
                font-size:14px;
                line-height: 30px;
            }
        }
    }
}

// 动画类名

// .my-enter-from,.my-leave-to{
//     height:0!important;

// }

// 从某种状态离开
.my-leave-from{
    height: 120px!important;
}
// 离开到某种状态
.my-leave-to{
     height: 0!important;
}
// 从某种状态进入
.my-enter-from{
    height: 0!important;
}
// 进入到某种状态
.my-enter-to{
     height: 120px!important;
}

// 过渡类
.my-enter-active,.my-leave-active{
    transition: all 1s linear;
}
</style>

